<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 通过id写对象   #id的名字 */
        #a {
            width: 300px;
            height: 200px;
            background-color: rgb(125, 33, 33);
        }

        #b {
            width: 250px;
            height: 250px;
            background-color: rgb(4, 99, 163);
            color: antiquewhite;
        }

        #div {
            width: 500px;
            height: 200px;
            background-color: #ff0;
        }

        .c {
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
    </style>
</head>

<body>

    <!-- 
        命名规则  字母数字，下划线或者中划线组成，数字不能开头
        建议  见名知意, 驼峰命名法(每个单词的首字母大写)，使用中划线或者下划线进行单词的分隔   最推荐使用中划线
        页面中  id具有唯一性


        取名字的第二种方式  类名   --- 更推荐使用类名
     -->

    <!-- <div id="shangBiaoMingZi"></div>
    <div id="shang_biao_ming_zi"></div>
    <div id="shang-biao-ming-zi"></div> -->


    <div class="c"></div>
    <div id="a">呵呵</div>
    <div id="b">哈哈</div>
    <div id="div"></div>


    <div class="c"></div>

</body>

</html>